<template>
  <div id="app" :class="classObject">
    <transition
      name="fade"
      @before-enter="beforeEnter"
      @after-enter="afterEnter">
      <component :is="pageName" :class="{ active: actived }" :current-page="currentPage"></component>
    </transition>
  </div>
</template>

<script>

import LoadingView from '@/views/LoadingView'
import MainView from '@/views/MainView'
import { mapState } from 'vuex'
import { UPDATE_INIT_DATA, UPDATE_PAGE } from '@/store/mutation-types'
import res from '@/res'
import Preload from '@/common/Preload'
import { showError } from '@/common/common'
import { getBaseInfo } from './common/api'
import { isDev } from './common/config'
// 资源文件
const assets = [
  ...Object.values(res.root),
  ...Object.values(res.award.root),
  // ...Object.values(res.compose.root),
  ...Object.values(res.index.root),
  ...Object.values(res.second.root)
]
export default {
  name: 'App',
  components: {
    loading: LoadingView,
    mainView: MainView
  },
  data () {
    return {
      actived: false,
      percent: 0,
      currentPage: 0
    }
  },
  computed: {
    classObject: function () {
      const winH = window.innerHeight
      const winW = window.innerWidth
      const h = winH / winW * 750
      let cname = ''
      if (h >= 1440) {
        cname = 'big'
      } else if (h >= 1334) {
        cname = 'large'
      } else if (h >= 1250) {
        cname = 'medium'
      } else if (h >= 1150) {
        cname = 'small'
      } else {
        cname = 'min'
      }
      return cname
    },
    ...mapState(['pageName'])
  },

  mounted () {
    // 微信分享
    if (window.wxdata) {
      // eslint-disable-next-line no-undef,no-new
      new WechatShare(window.wxdata)
    }
    this.onLoadRes()
  },
  methods: {
    beforeEnter () {
      this.actived = false
    },
    afterEnter () {
      this.actived = true
    },
    // 加载资源
    onLoadRes () {
      const loadPromise = new Promise((resolve, reject) => {
        const preload = Preload.create(true)
        preload.onProgress = (loaded, total) => {
          this.percent = Math.floor(loaded / total * 100)
        }
        preload.onComplete = resolve
        preload.loadAssets(assets)
      })
      Promise.all([loadPromise, getBaseInfo()
        // .catch(() => {
        //   return {
        //     status: 1,
        //     message: '',
        //     data: {
        //       my: null,
        //       saved: 0,
        //       hot: [
        //         {
        //           photo: 'https://youlan-1251454229.file.myqcloud.com/20240423/ml6qfl61b3i1714126520899.jpeg',
        //           nickname: '张海',
        //           brand: 1,
        //           content: '我喜欢篮球，也喜欢吃槟榔，因为和成天下槟榔的果子好、口感也好，所以一直以来，我都是吃的和成天下槟榔。去年的时候，我在他们公众号看到和成天下520狂欢节活动居然邀请到了篮球巨星麦迪来长沙，一边感叹和成天下真的是大手笔，一边打算到时候去现场看看，哪怕是远远的瞄一眼也很满足啊。到了活动当天，因为来的比较早，就挤到了最前面，真的都不敢想那时候自己到底有多激动，到现在回想起来，我都很开心，非常感谢和成天下满足了我的小愿望。'
        //         },
        //         {
        //           photo: 'https://youlan-1251454229.file.myqcloud.com/20240423/ml6qfl61b3i1714126520899.jpeg',
        //           nickname: '张海',
        //           brand: 1,
        //           content: '我喜欢篮球，也喜欢吃槟榔，因为和成天下槟榔的果子好、口感也好，所以一直以来，我都是吃的和成天下槟榔。去年的时候，我在他们公众号看到和成天下520狂欢节活动居然邀请到了篮球巨星麦迪来长沙，一边感叹和成天下真的是大手笔，一边打算到时候去现场看看，哪怕是远远的瞄一眼也很满足啊。到了活动当天，因为来的比较早，就挤到了最前面，真的都不敢想那时候自己到底有多激动，到现在回想起来，我都很开心，非常感谢和成天下满足了我的小愿望。'
        //         }
        //       ]
        //     }
        //   }
        // })
      ])
        .then(([_, { status, message, data }]) => {
          if (status !== 1) return Promise.reject(new Error(message))
          this.$store.commit(UPDATE_INIT_DATA, data)
          return this.toNext(data)
        })
        .catch((error) => {
          console.log(error)
          showError(error.message)
        })
    },
    async toNext (data = {}) {
      const { prize, saved, my, log } = data
      this.currentPage = 0
      console.log((prize && saved) || (!prize && log))
      // 中奖了, 填写信息 也填写了
      if ((prize && saved) || (!prize && log)) {
        this.currentPage = isDev ? 5 : 5
      } else if (prize && !saved) { // 中奖了, 但是没有填写信息
        this.currentPage = 4
      } else if (my && !prize) { // 上传作品了，但是没有抽奖
        await this.$createPoster()
        this.currentPage = 3
      }
      setTimeout(() => {
        this.$store.commit(UPDATE_PAGE, 'mainView')
      }, 250)
    }
  }
}
</script>
<style lang="scss">
@import "./assets/css/app.scss";
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>
